<div ng-controller="IronicNodeListController as table">

  <hz-magic-search-context filter-facets="table.nodeFacets">
    <hz-magic-search-bar>
    </hz-magic-search-bar>

    <table st-magic-search
           hz-table ng-cloak
           st-table="table.nodes"
           st-safe-src="table.nodesSrc"
           default-sort="name"
           default-sort-reverse="false"
           class="table table-striped table-rsp table-detail">

      <thead>
        <tr>
          <th colspan="9">
            <div class="pull-right">
              <button class="btn btn-default btn-sm"
                      style="margin-right:10px;"
                      ng-click="table.refresh()">
                <span translate>Refresh</span>
              </button>
              <button class="btn btn-default btn-sm"
                      ng-click="table.enrollNode()">
                <span class="fa fa-plus"></span>
                <span translate>Enroll Node</span>
              </button>
              <action-list uib-dropdown class="pull-right">
                <action button-type="split-button"
                        action-classes="'btn btn-default btn-sm'"
                        callback="table.deleteNode"
                        item="tCtrl.selected"
                        disabled="tCtrl.selected.length === 0">
                  <span class="fa fa-trash"></span>
                  {$ ::'Delete Nodes' | translate $}
                </action>
                <menu>
                  <li role="presentation"
                      ng-repeat="transition in table.actions.getPowerTransitions()"
                      ng-class="{disabled: tCtrl.selected.length === 0}">
                    <a role="menuitem"
                       ng-click="table.actions.setPowerState(
                                 tCtrl.selected,
                                 transition.state,
                                 transition.soft);
                                 $event.stopPropagation();
                                 $event.preventDefault()">
                      <span>{$ transition.label $}</span>
                    </a>
                  </li>
                  <li role="presentation"
                      ng-class="{disabled: tCtrl.selected.length === 0}"
                      ng-repeat="mode in [true, false]">
                    <a role="menuitem"
                       ng-click="table.maintenanceService.setMaintenance(
                                 tCtrl.selected,
                                 mode);
                                 $event.stopPropagation();
                                 $event.preventDefault()">
                      <span>{$ mode ? 'Maintenance On' : 'Maintenance Off' | translate $}</span>
                    </a>
                  </li>
                </menu>
              </action-list>
            </div>
          </th>
        </tr>

        <tr>
          <th class="multi_select_column">
            <input type="checkbox"
                   hz-select-all="table.nodes"/>
          </th>
          <th translate class="rsp-p1" st-sort="name" st-sort-default="name">
            Node Name
          </th>
          <th translate class="rsp-p1" st-sort="instance_uuid">
            Instance ID
          </th>
          <th translate class="rsp-p2" st-sort="power_state">
            Power State
          </th>
          <th translate class="rsp-p2" st-sort="provision_state">
            Provisioning State
          </th>
          <th translate class="rsp-p2" st-sort="maintenance">
            Maintenance
          </th>
          <th translate class="rsp-p2" st-sort="ports">
            Ports
          </th>
          <th translate class="rsp-p2" st-sort="driver">
            Driver
          </th>
          <th translate class="actions_column">
            Actions
          </th>
        </tr>
      </thead>

      <tbody>
        <tr ng-repeat="node in table.nodes">
          <td class="multi_select_column">
            <input type="checkbox"
                   hz-select="node"
                   ng-model="tCtrl.selections[node.id].checked"/>
          </td>
          <td class="rsp-p1">
            <a href="{$ node.uuid $}">
              {$ node.name || node.uuid $}
            </a>
          </td>
          <td class="rsp-p1">
            <!-- multiple tags used purposefully to ensure that the link
                 is removed if node uuid == no instance. Using ng-attr-href
                 only removed the href and the <a> styling remained which could
                 cause confusion for users. -->
            <a href="/admin/instances/{$ node.instance_uuid $}/detail"
               ng-if="node.instance_uuid">
              {$ node.instance_uuid $}
            </a>
            <span ng-if="!node.instance_uuid">{$ 'No Instance' | translate $}</span>
          </td>
          <td class="rsp-p2" >
            <div ng-class="{'running': node.target_power_state}">
              {$ node.power_state $}
            </div>
          </td>
          <td class="rsp-p2">{$ node.provision_state $}</td>
          <td class="rsp-p2">{$ node.maintenance | yesno $}</td>
          <td class="rsp-p2">{$ node.ports.length $}</td>
          <td class="rsp-p2">{$ node.driver $}</td>
          <td class="actions_column">
            <action-list uib-dropdown>
              <action button-type="split-button"
                      action-classes="'btn btn-default btn-sm'"
                      callback="table.editNode"
                      item="node">
                {$ ::'Edit' | translate $}
              </action>
              <menu>
                <li role="presentation"
                    ng-repeat="transition in table.actions.getPowerTransitions(node)">
                  <a role="menuitem"
                     ng-click="table.actions.setPowerState(
                               [node],
                               transition.state,
                               transition.soft);
                               $event.stopPropagation();
                               $event.preventDefault()">
                    <span>{$ transition.label $}</span>
                  </a>
                </li>
                <li role="presentation">
                  <a role="menuitem"
                     ng-click="table.maintenanceService.setMaintenance(
                               [node],
                               !node.maintenance);
                               $event.stopPropagation();
                               $event.preventDefault()">
                    <span>{$ node.maintenance ?
                      "Maintenance Off" : "Maintenance On" | translate $}</span>
                  </a>
                </li>
                <li role="presentation">
                  <a role="menuitem"
                     ng-click="table.bootDeviceService.setBootDevice(node);
                               $event.stopPropagation();
                               $event.preventDefault()">
                    <span>{$ "Set Boot Device" | translate $}</span>
                  </a>
                </li>
                <li role="presentation"
                    ng-class="{disabled: !(
                              node.provision_state === 'available' ||
                              node.provision_state === 'nostate' ||
                              node.provision_state === 'manageable' ||
                              node.provision_state === 'enroll')}">
                  <a role="menuitem"
                     ng-click="table.deleteNode([node]);
                               $event.stopPropagation();
                               $event.preventDefault()">
                    <span class="fa fa-trash"></span>
                    {$ ::'Delete Node' | translate $}
                  </a>
                </li>
                <action button-type="menu-item"
                        callback="table.createPort"
                        item="node">
                  {$ ::'Create Port' | translate $}
                </action>
                <li role="presentation"
                    ng-repeat="transition in table.getNodeStateTransitions(node)">
                  <a role="menuitem"
                     ng-click="table.actions.setProvisionState({
                               node: node,
                               verb: transition.verb});
                               $event.stopPropagation();
                               $event.preventDefault()">
                    <span>{$ transition.label $}</span>
                  </a>
                </li>
              </menu>
            </action-list>
          </td>
        </tr>
      </tbody>
      <tfoot hz-table-footer items="table.nodes"></tfoot>
    </table>
  </hz-magic-search-context>
</div>
